<template>
  <b-container fluid>
    <!-- top nav-link -->
    <NavLink :navList="navList" />
    <!-- User Interface controls -->
    <div class="sort-part">
      <b-row>
        <b-col md="6" class="my-1">
          <b-form-group label-cols-sm="3" label="Filter" class="mb-0">
            <b-input-group>
              <b-form-input v-model="filter" placeholder="Type to Search"></b-form-input>
              <b-input-group-append>
                <b-button :disabled="!filter" @click="filter = ''">Clear</b-button>
              </b-input-group-append>
            </b-input-group>
          </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
          <b-form-group label-cols-sm="3" label="Sort" class="mb-0">
            <b-input-group>
              <b-form-select v-model="sortBy" :options="sortOptions">
                <option slot="first" :value="null">-- none --</option>
              </b-form-select>
              <b-form-select v-model="sortDesc" :disabled="!sortBy" slot="append">
                <option :value="false">Asc</option>
                <option :value="true">Desc</option>
              </b-form-select>
            </b-input-group>
          </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
          <b-form-group label-cols-sm="3" label="Sort direction" class="mb-0">
            <b-form-select v-model="sortDirection">
              <option value="asc">Asc</option>
              <option value="desc">Desc</option>
              <option value="last">Last</option>
            </b-form-select>
          </b-form-group>
        </b-col>

        <b-col md="6" class="my-1">
          <b-form-group label-cols-sm="3" label="Per page" class="mb-0">
            <b-form-select v-model="perPage" :options="pageOptions"></b-form-select>
          </b-form-group>
        </b-col>

        <b-col md="6" class="my-1 create-btn">
          <b-button block variant="primary" v-b-popover.hover="'点击进入添加任务窗口'" title="新建任务">新建任务</b-button>
        </b-col>
      </b-row>
    </div>

    <!-- Main table element -->
    <b-table
      show-empty
      stacked="md"
      :items="items"
      :fields="fields"
      :current-page="currentPage"
      :per-page="perPage"
      :filter="filter"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      :sort-direction="sortDirection"
      @filtered="onFiltered"
    >
      <template slot="name" slot-scope="row">{{ row.value}}</template>

      <template slot="isFinished" slot-scope="row">
        <b-button size="sm" v-if="row.value" disabled variant="success">已完成</b-button>
        <b-button size="sm" v-else disabled>未完成</b-button>
      </template>

      <template slot="actions" slot-scope="row">
        <b-button size="sm" @click="edit(row.item)" class="mr-1" variant="primary">编辑</b-button>
        <b-button size="sm" @click="del(row.item)" class="mr-1" variant="danger">删除</b-button>
        <b-button size="sm" @click="fordetail(row.item)" variant="info">查看详情</b-button>
      </template>
    </b-table>

    <!-- Pagination  -->
    <div class="overflow-auto">
      <b-pagination
        v-model="currentPage"
        :total-rows="rows"
        :per-page="perPage"
        aria-controls="my-table"
      ></b-pagination>
    </div>
  </b-container>
</template>

<script>
import NavLink from "@/components/NavLink";
export default {
  name: "tasklist",
  created() {
    this.axios.get("/task").then(res => {
      let len = res.data.data.tasks.length;
      for (let index = 0; index < len; index++) {
        let i = res.data.data.tasks[index];
        this.items.push(i);
      }
    });
  },
  data() {
    return {
      items: [],
      fields: [
        { key: "id", label: "id", sortable: true },
        {
          key: "name",
          label: "Task name",
          sortable: true,
          sortDirection: "desc"
        },
        {
          key: "datetime",
          label: "Create date",
          sortable: true,
          class: "text-center"
        },
        { key: "isFinished", label: "is Finished" },
        { key: "actions", label: "Actions" }
      ],
      navList: [
        { text: "个人中心", path: "/user" },
        { text: "任务列表", path: "/user/tasklist" }
      ],

      totalRows: 1,
      currentPage: 1,
      perPage: 6,
      pageOptions: [6, 8, 10, 15],

      sortBy: "datetime",
      sortDesc: true,
      sortDirection: "asc",
      filter: null,

      boxTwo: ""
    };
  },
  computed: {
    sortOptions() {
      // Create an options list from our fields
      return this.fields
        .filter(f => f.sortable)
        .map(f => {
          return { text: f.label, value: f.key };
        });
    },
    rows() {
      return this.items.length;
    }
  },
  mounted() {
    // Set the initial number of items
    this.totalRows = this.items.length;
  },
  methods: {
    edit(e) {
      console.log("edit:", e.id);
      this.$router.push({
          name: "edit",
          params: {
            id: e.id
          }              
      });
    },
    del(e) {
      console.log("del:", e.id);
      this.boxTwo = "";
      this.$bvModal
        .msgBoxConfirm("Please confirm that you want to delete this task.", {
          title: "Please Confirm",
          size: "sm",
          buttonSize: "sm",
          okVariant: "danger",
          okTitle: "YES",
          cancelTitle: "NO",
          footerClass: "p-2",
          hideHeaderClose: false,
          centered: true
        })
        .then(value => {
          // this.boxTwo = value;
          console.log("del success");
        })
        .catch(err => {
          // An error occurred
        });
    },
    fordetail(e) {
      console.log("detail", e.id);
    },
    resetInfoModal() {
      this.infoModal.title = "";
      this.infoModal.content = "";
    },
    onFiltered(filteredItems) {
      // Trigger pagination to update the number of buttons/pages due to filtering
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    }
  },
  components: {
    NavLink
  }
};
</script>

<style lang="scss" scoped>
.sort-part {
  padding: 15px 0;
}
</style>
